<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #big{
            width: 620px;
            height: 300px;
            overflow: scroll;
        }
        #small{
            width: 600px;
            height: 600px;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="small">
            欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        </div>
    </div>
    <input type="checkbox" id="agreement" disabled>
    同意协议
    
    <input type="button" id="go" value="去注册" disabled>
</body>
</html>
<script>
    /*
        实现思路
            1、需要判断出是否已经滚动到底部，一旦到达底部  就去掉 CheckBox的disabled属性
                使用滚动事件，在事件中判断条件是 内容高度 + 滚动的距离 == 完整的距离
            2、一旦用户勾选了，去掉注册按钮的disabled属性
                CheckBox绑定点击事件，事件中 判断checked属性是否为真 如果为真  就去掉按钮的disable属性
    */
    var bigDom = document.querySelector('#big');
    var agreementDom = document.querySelector('#agreement');
    bigDom.onscroll = function(){
        // 获取到内容的高度
        var contentHeight = parseInt(window.getComputedStyle(bigDom).height);
        // 获取滚动的距离
        var bigScrollHeight = bigDom.scrollTop;
        if(contentHeight + bigScrollHeight > bigDom.scrollHeight-0.21){
            // 去掉checkbox的禁用状态
            agreementDom.disabled = false;
        }
        console.log("内容高度",contentHeight)
        console.log("滚动距离",bigScrollHeight);
        console.log("整个高度",bigDom.scrollHeight);
    }
    agreementDom.onclick = function(){
        // 获取到当前CheckBox的勾选状态
        var status = this.checked;
        // checkbox勾选  取出的值是true  按钮要可以点击  所以disabled属性 要为false
        document.querySelector('#go').disabled = !status;
    }
</script>